<template>
  <view class="bx_tab">
    <view v-for="(item, index) in tabData" :key="index" class="tab-item" :class="{'selected': item.checked}" @click="tabClick(item, index)">
      <!-- <b-image width="40" height="40" :src="require(`@/static/images/tab/${item.icon + (item.checked ? '_selected.gif' : '.png') }`)" /> -->
      <b-image width="40" height="40" :src="require(`@/static/images/tab/icon_${item.icon + (item.checked ? '_active.png' : '.png') }`)" />
      <span class="tab-link" v-html="item.title"></span>
    </view>
  </view>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex'
// import { getVipUrl } from '@/apis/Promotion'
import { h5NavigateTo, toFunctionDetail } from '@/utils/navigateTo'
export default {
  name: 'Tab',
  data() {
    return {
      tabData: [
        {
          id: 1,
          path: '/pages/home/index',
          icon: 'home',
          title: '碧选',
          show: true,
          checked: false
        },
        {
          id: 2,
          path: '/pages/coupon/index',
          icon: 'coupon',
          title: '碧划算',
          show: true,
          checked: false
        },
        // {
        //   path: '/found',
        //   icon: 'tab_found',
        //   title: '社区',
        //   show: true,
        //   checked: false
        // },
        {
          id: 3,
          path: '/pages/live/index',
          icon: 'live',
          title: '直播',
          show: true,
          checked: false,
          otherPath: ''
        },
        {
          id: 4,
          path: '/pages/moments/index',
          icon: 'strategy',
          title: '素材圈',
          show: true,
          checked: false
        },
        {
          id: 5,
          path: '/pages/mine/index',
          icon: 'mine',
          title: '我的',
          show: true,
          checked: false
        }
      ]
    }
  },
  computed: {
    ...mapState([
      'token',
      'userInfo'
    ])
  },
  async created() {
    const currentPage = this.$prePage(1, 'route')
    this.colorChange(currentPage)
    // if (this.token && this.userInfo) {
    //   getVipUrl({
    //     userRole: this.userInfo.current_member_card_type + ''
    //   }).then(res => {
    //     const info = res.data
    //     if (!info) {
    //       return
    //     }
    //     this.tabData.forEach(item => {
    //       if (item.icon === 'tab_fire') {
    //         item.otherPath = info.vip_link
    //       }
    //     })
    //   })
    // }
  },
  methods: {
    colorChange(path) {
      // console.log('path', path)
      this.tabData.forEach((item, index) => {
        if (item.path.indexOf(path) > -1) {
          this.$set(this.tabData[index], 'checked', true)
        } else {
          this.$set(this.tabData[index], 'checked', false)
        }
      })
    },
    tabClick(item, index) {
      this.$trackSDK.track('bx.home.navmenu.click', '', {
        title: item.title
      })
      if (item.icon === 'tab_fire' && this.token && this.userInfo && item.otherPath) {
        if (item.otherPath.indexOf('pagesDetail/template/index') > -1 || item.otherPath.indexOf('detail/activity') > -1) {
          this.tabClickNext(item)
        } else {
          h5NavigateTo(item.otherPath)
        }
      } else {
        this.tabClickNext(item)
      }
    },
    tabClickNext(item) {
      this.$emit('tabClick', item.path)
      if (item.path === '/pages/live/index') {
        toFunctionDetail({ type: 8, type_val: '/pagesDetail/living-list/index' })
      } else {
        this.$navigateTo(item.path, {}, 'switchTab')
      }
      this.$sensorTrack('buttonClick', {
        button_name: item.title,
        button_key: 'app_tab'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .bx_tab{
    display: flex;
    position: fixed;
    z-index: 99;
    width: 100%;
    bottom: 0;
    display: flex;
    left: 0;
    box-shadow:0px -10rpx 10rpx 0rpx rgba(229,229,229,0.1);
    background-color: #fff;
    height: calc(100rpx + constant(safe-area-inset-bottom));
    height: calc(100rpx + env(safe-area-inset-bottom));
    box-sizing: border-box;
    padding: 10rpx 0;
    font-size: $font-size-medium;
    // padding-bottom:10rpx;
    // padding-bottom:constant(safe-area-inset-bottom);
    // padding-bottom:env(safe-area-inset-bottom);
    padding-bottom: calc(0rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
    .tab-item{
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative;
      .tab-link{
        font-size: 24rpx;
        color: $color-text;
        margin-top: -2rpx;
      }
    }
    .selected{
      .tab-link{
        color: #000;
      }
    }
    &.router-link-active{
      .tab-link{
        color: #000;
          border-bottom: 4rpx solid #000;
      }
    }
  }

</style>
